<template>

  <div class="common-layout">
    <el-container>

      <el-header class="header-class">
        <el-row :gutter="20">
          <el-col :span="14"
                  class="header-text"> 火影自习室</el-col>
          <el-col :span="8">
            <span class="id-style"> {{user.value.admin_account}}，你好！美好的一天,从阅读开始！</span>
          </el-col>
          <el-col :span="2"
                  class="button-class">
            <el-button @click="exitLogin">退出登录</el-button>
          </el-col>

        </el-row>

      </el-header>

      <el-container>
        <el-aside class="aside-class">
          <!--侧边栏 ==================== -->
          <el-row class="tac">

            <el-col :span="24">

              <el-menu active-text-color="#ffd04b"
                       background-color="#545c64"
                       class="el-menu-vertical-demo"
                       default-active="2"
                       text-color="#fff"
                       @open="handleOpen"
                       @close="handleClose"
                       :router="true"
                       collapse-transition="true">
                <!-- 用户管理 -->
                <el-sub-menu index="/home/user">
                  <template #title>
                    <el-icon>
                      <User />
                    </el-icon>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/home/user/setuser">用户设置</el-menu-item>

                    <el-menu-item index="/home/user/time">学时排行</el-menu-item>

                  </el-menu-item-group>
                </el-sub-menu>
                <!-- 区域座位管理 -->
                <el-sub-menu index="/home/aseaseat">
                  <template #title>
                    <el-icon>
                      <Location />
                    </el-icon>
                    <span>区域座位管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/home/aseaseat/aseas">区域管理</el-menu-item>
                    <el-menu-item index="/home/aseaseat/seatdetails">座位详情</el-menu-item>
                    <el-menu-item index="/home/aseaseat/seatreservation">座位预约情况</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- 卡劵管理 -->
                <el-sub-menu index="/home/cardadmin">
                  <template #title>
                    <el-icon>
                      <CreditCard />
                    </el-icon>
                    <span>卡劵管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/home/cardadmin/cardstock">卡劵售卖</el-menu-item>
                    <el-menu-item index="/home/cardadmin/buyhistory">用户购买记录</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- 订单充值 -->
                <el-sub-menu index="/home/ordertop">
                  <template #title>
                    <el-icon>
                      <Wallet />
                    </el-icon>
                    <span>订单充值</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/home/ordertop/orderamdin">订单管理</el-menu-item>
                    <el-menu-item index="/home/ordertop/prepaidadmin">充值管理</el-menu-item>
                    <el-menu-item index="/home/ordertop/prepaidprice">充值价格配置</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- 其他 -->
                <el-sub-menu index="/home/elseadmin">
                  <template #title>
                    <el-icon>
                      <Suitcase />
                    </el-icon>
                    <span>其他</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/home/elseadmin/gateadmin">大门管理</el-menu-item>
                    <el-menu-item index="/home/elseadmin/codeadmin">兑换码管理</el-menu-item>
                    <el-menu-item index="/home/elseadmin/appointmenttime">预约时间配置</el-menu-item>
                    <el-menu-item index="/home/elseadmin/businestime">营业时间配置</el-menu-item>
                    <el-menu-item index="/home/elseadmin/closingtime">停业时间配置</el-menu-item>
                    <el-menu-item index="/home/elseadmin/forhowlong">兑换时长管理</el-menu-item>
                    <el-menu-item index="/home/elseadmin/homeslideadmin">首页幻灯管理</el-menu-item>
                    <el-menu-item index="/home/elseadmin/phoneadmin">商家电话管理</el-menu-item>

                  </el-menu-item-group>
                </el-sub-menu>

              </el-menu>
            </el-col>
          </el-row>
          <!-- =================== -->
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>

    </el-container>
  </div>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
const user = reactive({
  value: {}
})
onMounted(() => {
  user.value = JSON.parse(sessionStorage.getItem("admin"))
})

const router = useRouter()
const exitLogin = () => {

  sessionStorage.removeItem('admin')//清空数据
  router.push('/login')
}

</script>

<style>
html,
body,
.common-layout,
.el-menu {
  height: 100%;
  margin: 0;
}
.header-class {
  background-color: rgb(55, 61, 65);
  color: white;
}
.tac {
  height: 100%;
}
.aside-class {
  background-color: rgb(55, 61, 65);
  height: 100%;
  width: 200px;
}

.id-style {
  font-size: 20px;
  line-height: 55px;
}
.button-class {
  vertical-align: middle;
  line-height: 55px;
}
.header-text {
  line-height: 50px;
  font-size: 35px;
}
.el-container {
  height: 100%;
}
#app .el-menu-item {
  text-align: center;
  justify-content: center;
  padding-left: 0;
}
.el-main {
  overflow: hidden;
}
</style>